<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能生态箱 - 完整版</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* 顶部标题栏 */
        .header {
            background: white;
            padding: 20px 30px;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            color: #667eea;
            font-size: 28px;
        }

        .connection-status {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 16px;
            background: #f5f5f5;
            border-radius: 20px;
        }

        .status-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ccc;
            animation: pulse 2s infinite;
        }

        .status-dot.connected {
            background: #4CAF50;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* MQTT配置面板 */
        .config-panel {
            background: white;
            padding: 20px 30px;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .config-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            align-items: end;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .form-group label {
            color: #666;
            font-size: 14px;
            font-weight: 500;
        }

        .form-group input {
            padding: 10px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
        }

        .form-group input:focus {
            outline: none;
            border-color: #667eea;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
        }

        .btn-primary {
            background: #667eea;
            color: white;
        }

        .btn-primary:hover {
            background: #5568d3;
            transform: translateY(-2px);
        }

        /* 页面导航 */
        .page-nav {
            background: white;
            padding: 15px 30px;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .nav-btn {
            padding: 12px 24px;
            border: 2px solid #e0e0e0;
            background: white;
            border-radius: 10px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            color: #666;
        }

        .nav-btn:hover {
            border-color: #667eea;
            color: #667eea;
        }

        .nav-btn.active {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border-color: #667eea;
        }

        /* 页面内容 */
        .page-content {
            display: none;
        }

        .page-content.active {
            display: block;
        }

        /* 卡片网格 */
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .card {
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }

        .card-header h3 {
            color: #333;
            font-size: 18px;
        }

        .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
            background: #f0f0f0;
            color: #666;
        }

        .metric-display {
            text-align: center;
            margin: 20px 0;
        }

        .metric-value {
            font-size: 48px;
            font-weight: bold;
            color: #667eea;
        }

        .metric-status {
            font-size: 16px;
            color: #666;
            padding: 5px 15px;
            border-radius: 20px;
            display: inline-block;
            margin-top: 10px;
        }

        .metric-status.normal { background: #e8f5e9; color: #4CAF50; }
        .metric-status.high { background: #ffebee; color: #f44336; }
        .metric-status.low { background: #e3f2fd; color: #2196F3; }

        .btn-feeding {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #FFA726, #FF6F00);
            color: white;
            font-size: 18px;
            margin-top: 15px;
        }

        .btn-light {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #FDD835, #F9A825);
            color: #000;
            font-size: 18px;
            margin-top: 15px;
        }

        /* 图表容器 */
        .chart-container {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .chart-header {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }

        .chart-header h2 {
            color: #333;
            margin-bottom: 10px;
        }

        .chart-info {
            display: flex;
            gap: 20px;
            font-size: 14px;
            color: #666;
        }

        canvas {
            max-width: 100%;
            height: 400px !important;
        }

        /* 日志面板 */
        .log-panel {
            background: white;
            padding: 20px 30px;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
        }

        .log-content {
            background: #1e1e1e;
            color: #00ff00;
            padding: 15px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            height: 200px;
            overflow-y: auto;
            margin-bottom: 10px;
        }

        .log-entry {
            margin-bottom: 5px;
        }

        .log-entry.info { color: #00ff00; }
        .log-entry.success { color: #4CAF50; }
        .log-entry.error { color: #f44336; }
        .log-entry.warning { color: #FFA726; }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部标题 -->
        <div class="header">
            <h1>🌿 智能生态箱</h1>
            <div class="connection-status">
                <span class="status-dot" id="statusDot"></span>
                <span id="statusText">未连接</span>
            </div>
        </div>

        <!-- MQTT配置 -->
        <div class="config-panel">
            <h2>⚙️ MQTT配置</h2>
            <div class="config-form">
                <div class="form-group">
                    <label>服务器地址:</label>
                    <input type="text" id="mqttHost" value="broker.emqx.io">
                </div>
                <div class="form-group">
                    <label>端口:</label>
                    <input type="number" id="mqttPort" value="8083">
                </div>
                <div class="form-group">
                    <label>发布主题:</label>
                    <input type="text" id="mqttTopic" value="qtmqtt/topic1">
                </div>
                <div class="form-group">
                    <label>订阅主题:</label>
                    <input type="text" id="mqttSubTopic" value="McuToClient">
                </div>
                <button id="connectBtn" class="btn btn-primary">连接</button>
            </div>
        </div>

        <!-- 页面导航 -->
        <nav class="page-nav">
            <button class="nav-btn active" onclick="switchPage(1)">📊 监控</button>
            <button class="nav-btn" onclick="switchPage(2)">🌡️ 温度图表</button>
            <button class="nav-btn" onclick="switchPage(3)">💧 湿度图表</button>
            <button class="nav-btn" onclick="switchPage(4)">⚙️ 设置</button>
        </nav>

        <!-- Page 1: 监控页面 -->
        <div class="page-content active" id="page1">
            <div class="cards-grid">
                <!-- 温度卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h3>🌡️ 温度</h3>
                        <button class="btn btn-sm" onclick="setTempThreshold()">设置</button>
                    </div>
                    <div class="metric-display">
                        <div class="metric-value" id="tempValue">--°C</div>
                        <div class="metric-status" id="tempStatus">等待数据...</div>
                    </div>
                    <div style="text-align:center;color:#999;font-size:14px;">
                        阈值: <span id="tempRange">10-30°C</span>
                    </div>
                </div>

                <!-- 湿度卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h3>💧 湿度</h3>
                        <button class="btn btn-sm" onclick="setHumidThreshold()">设置</button>
                    </div>
                    <div class="metric-display">
                        <div class="metric-value" id="humidValue">--%</div>
                        <div class="metric-status" id="humidStatus">等待数据...</div>
                    </div>
                    <div style="text-align:center;color:#999;font-size:14px;">
                        阈值: <span id="humidRange">30-60%</span>
                    </div>
                </div>

                <!-- 食物卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h3>🍖 食物</h3>
                        <button class="btn btn-sm" onclick="setFoodAmount()">设置</button>
                    </div>
                    <div class="metric-display">
                        <div class="metric-value" id="foodValue" style="font-size:36px;">剩余--</div>
                    </div>
                    <button class="btn btn-feeding" onclick="triggerFeeding()">🍖 投喂</button>
                </div>

                <!-- 环境光卡片 -->
                <div class="card">
                    <div class="card-header">
                        <h3>💡 环境光</h3>
                    </div>
                    <div class="metric-display">
                        <div class="metric-value" id="alsValue" style="color:#F57F17;">--</div>
                        <div style="color:#999;font-size:14px;">LUX</div>
                    </div>
                    <button class="btn btn-light" id="lightBtn" onclick="toggleLight()">💡 开启环境光</button>
                </div>
            </div>
        </div>

        <!-- Page 2: 温度图表 -->
        <div class="page-content" id="page2">
            <div class="chart-container">
                <div class="chart-header">
                    <h2>🌡️ 温度变化趋势图</h2>
                    <div class="chart-info">
                        <span>当前: <strong id="chartTempValue">--°C</strong></span>
                        <span>阈值: <strong id="chartTempRange">10-30°C</strong></span>
                    </div>
                </div>
                <canvas id="tempChart"></canvas>
            </div>
        </div>

        <!-- Page 3: 湿度图表 -->
        <div class="page-content" id="page3">
            <div class="chart-container">
                <div class="chart-header">
                    <h2>💧 湿度变化趋势图</h2>
                    <div class="chart-info">
                        <span>当前: <strong id="chartHumidValue">--%</strong></span>
                        <span>阈值: <strong id="chartHumidRange">30-60%</strong></span>
                    </div>
                </div>
                <canvas id="humidChart"></canvas>
            </div>
        </div>

        <!-- Page 4: 设置页面 -->
        <div class="page-content" id="page4">
            <div class="chart-container">
                <h2>⚙️ 系统设置</h2>
                <div style="margin-top:20px;">
                    <p style="color:#666;">设备FD: <strong id="deviceFdDisplay">--</strong></p>
                    <p style="color:#666;margin-top:10px;">订阅主题: McuToClient, qtmqtt/topic1</p>
                </div>
            </div>
        </div>

        <!-- 日志面板 -->
        <div class="log-panel">
            <h3>📋 消息日志</h3>
            <div class="log-content" id="logContent"></div>
            <button class="btn btn-sm" onclick="clearLog()">清空日志</button>
        </div>
    </div>

    <script src="https://unpkg.com/mqtt@5.3.4/dist/mqtt.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
    <script>
        // 全局变量
        let mqttClient = null;
        let isConnected = false;
        let tempChart, humidChart;
        let tempData = [], humidData = [];
        let lightOn = false;
        
        const state = {
            temperature: 0,
            humidity: 0,
            foodAmount: 0,
            als: 0,
            deviceFd: '',
            tempMax: 30,
            tempMin: 10,
            humidMax: 60,
            humidMin: 30
        };

        // 页面加载
        window.onload = function() {
            initCharts();
            addLog('info', '📱 网页加载完成');
        };

        // 页面切换
        function switchPage(pageNum) {
            document.querySelectorAll('.page-content').forEach(p => p.classList.remove('active'));
            document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
            
            document.getElementById('page' + pageNum).classList.add('active');
            document.querySelectorAll('.nav-btn')[pageNum - 1].classList.add('active');
        }

        // MQTT连接
        document.getElementById('connectBtn').onclick = function() {
            if (isConnected) {
                mqttClient.end();
                isConnected = false;
                updateStatus(false);
                this.textContent = '连接';
                addLog('info', '🔌 已断开连接');
            } else {
                connectMqtt();
            }
        };

        function connectMqtt() {
            const host = document.getElementById('mqttHost').value;
            const port = parseInt(document.getElementById('mqttPort').value);
            const clientId = `webapp_${Math.random().toString(16).substring(2, 10)}_${Date.now()}`;
            
            addLog('info', `🔌 连接MQTT: ${host}:${port}`);
            addLog('info', `🆔 客户端ID: ${clientId}`);
            
            const url = `ws://${host}:${port}/mqtt`;
            mqttClient = mqtt.connect(url, {
                clientId: clientId,
                clean: true,
                keepalive: 60
            });
            
            mqttClient.on('connect', function() {
                isConnected = true;
                updateStatus(true);
                document.getElementById('connectBtn').textContent = '断开';
                addLog('success', '✅ MQTT连接成功');
                
                const subTopic = document.getElementById('mqttSubTopic').value;
                mqttClient.subscribe(subTopic, (err) => {
                    if (!err) {
                        addLog('success', `✅ 订阅主题: ${subTopic}`);
                    }
                });
                
                mqttClient.subscribe('qtmqtt/topic1', (err) => {
                    if (!err) {
                        addLog('success', '✅ 订阅主题: qtmqtt/topic1');
                    }
                });
            });
            
            mqttClient.on('message', handleMessage);
            
            mqttClient.on('error', (err) => {
                addLog('error', `❌ 错误: ${err.message}`);
                updateStatus(false);
            });
        }

        // 处理MQTT消息
        function handleMessage(topic, message) {
            const msg = message.toString();
            addLog('info', `📨 [${topic}] ${msg}`);
            
            try {
                const data = JSON.parse(msg);
                
                if (data.fd !== undefined) {
                    state.deviceFd = String(data.fd);  // int或string都转为string
                    document.getElementById('deviceFdDisplay').textContent = data.fd;
                }
                
                if (data.Tem) {
                    const temp = parseFloat(data.Tem);
                    state.temperature = temp;
                    updateTemperature(temp);
                }
                
                if (data.Hum) {
                    const humid = parseFloat(data.Hum);
                    state.humidity = humid;
                    updateHumidity(humid);
                }
                
                if (data.food) {
                    const food = parseInt(data.food);
                    state.foodAmount = food;
                    document.getElementById('foodValue').textContent = `剩余${food}`;
                }
                
                if (data.ALS) {
                    const als = parseInt(data.ALS);
                    state.als = als;
                    document.getElementById('alsValue').textContent = als;
                }
                
                if (data.Tem_max) {
                    state.tempMax = parseInt(data.Tem_max);
                    state.tempMin = parseInt(data.Tem_min);
                    document.getElementById('tempRange').textContent = `${state.tempMin}-${state.tempMax}°C`;
                    document.getElementById('chartTempRange').textContent = `${state.tempMin}-${state.tempMax}°C`;
                }
                
                if (data.Hum_max) {
                    state.humidMax = parseInt(data.Hum_max);
                    state.humidMin = parseInt(data.Hum_min);
                    document.getElementById('humidRange').textContent = `${state.humidMin}-${state.humidMax}%`;
                    document.getElementById('chartHumidRange').textContent = `${state.humidMin}-${state.humidMax}%`;
                }
            } catch (e) {
                addLog('error', `❌ JSON解析错误: ${e.message}`);
            }
        }

        // 更新温度显示
        function updateTemperature(temp) {
            document.getElementById('tempValue').textContent = temp.toFixed(1) + '°C';
            document.getElementById('chartTempValue').textContent = temp.toFixed(1) + '°C';
            
            const status = document.getElementById('tempStatus');
            if (temp >= state.tempMax) {
                status.textContent = '温度过高';
                status.className = 'metric-status high';
            } else if (temp <= state.tempMin) {
                status.textContent = '温度过低';
                status.className = 'metric-status low';
            } else {
                status.textContent = '温度正常';
                status.className = 'metric-status normal';
            }
            
            addToTempChart(temp);
        }

        // 更新湿度显示
        function updateHumidity(humid) {
            document.getElementById('humidValue').textContent = humid.toFixed(1) + '%';
            document.getElementById('chartHumidValue').textContent = humid.toFixed(1) + '%';
            
            const status = document.getElementById('humidStatus');
            if (humid >= state.humidMax) {
                status.textContent = '湿度过高';
                status.className = 'metric-status high';
            } else if (humid <= state.humidMin) {
                status.textContent = '湿度过低';
                status.className = 'metric-status low';
            } else {
                status.textContent = '湿度正常';
                status.className = 'metric-status normal';
            }
            
            addToHumidChart(humid);
        }

        // 更新连接状态
        function updateStatus(connected) {
            const dot = document.getElementById('statusDot');
            const text = document.getElementById('statusText');
            dot.className = connected ? 'status-dot connected' : 'status-dot';
            text.textContent = connected ? '已连接' : '未连接';
        }

        // 初始化图表
        function initCharts() {
            const tempCtx = document.getElementById('tempChart').getContext('2d');
            tempChart = new Chart(tempCtx, {
                type: 'line',
                data: {
                    labels: [],
                    datasets: [{
                        label: '温度',
                        data: [],
                        borderColor: '#667eea',
                        backgroundColor: 'rgba(102, 126, 234, 0.1)',
                        tension: 0.4,
                        fill: true
                    }, {
                        label: '最高阈值',
                        data: [],
                        borderColor: '#f44336',
                        borderDash: [5, 5],
                        pointRadius: 0
                    }, {
                        label: '最低阈值',
                        data: [],
                        borderColor: '#2196F3',
                        borderDash: [5, 5],
                        pointRadius: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { min: 0, max: 50 }
                    }
                }
            });
            
            const humidCtx = document.getElementById('humidChart').getContext('2d');
            humidChart = new Chart(humidCtx, {
                type: 'line',
                data: {
                    labels: [],
                    datasets: [{
                        label: '湿度',
                        data: [],
                        borderColor: '#4CAF50',
                        backgroundColor: 'rgba(76, 175, 80, 0.1)',
                        tension: 0.4,
                        fill: true
                    }, {
                        label: '最高阈值',
                        data: [],
                        borderColor: '#f44336',
                        borderDash: [5, 5],
                        pointRadius: 0
                    }, {
                        label: '最低阈值',
                        data: [],
                        borderColor: '#2196F3',
                        borderDash: [5, 5],
                        pointRadius: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { min: 0, max: 100 }
                    }
                }
            });
        }

        // 添加温度数据到图表
        function addToTempChart(temp) {
            tempData.push(temp);
            if (tempData.length > 30) tempData.shift();
            
            const labels = tempData.map((_, i) => i + 1);
            tempChart.data.labels = labels;
            tempChart.data.datasets[0].data = tempData;
            tempChart.data.datasets[1].data = new Array(tempData.length).fill(state.tempMax);
            tempChart.data.datasets[2].data = new Array(tempData.length).fill(state.tempMin);
            tempChart.update('none');
        }

        // 添加湿度数据到图表
        function addToHumidChart(humid) {
            humidData.push(humid);
            if (humidData.length > 30) humidData.shift();
            
            const labels = humidData.map((_, i) => i + 1);
            humidChart.data.labels = labels;
            humidChart.data.datasets[0].data = humidData;
            humidChart.data.datasets[1].data = new Array(humidData.length).fill(state.humidMax);
            humidChart.data.datasets[2].data = new Array(humidData.length).fill(state.humidMin);
            humidChart.update('none');
        }

        // 设置温度阈值
        function setTempThreshold() {
            const max = prompt('请输入温度最高阈值(°C):', state.tempMax);
            if (max === null) return;
            const min = prompt('请输入温度最低阈值(°C):', state.tempMin);
            if (min === null) return;
            
            const maxVal = parseInt(max);
            const minVal = parseInt(min);
            
            if (minVal >= maxVal) {
                alert('最低阈值不能大于等于最高阈值！');
                return;
            }
            
            state.tempMax = maxVal;
            state.tempMin = minVal;
            document.getElementById('tempRange').textContent = `${minVal}-${maxVal}°C`;
            document.getElementById('chartTempRange').textContent = `${minVal}-${maxVal}°C`;
            
            sendSettings();
        }

        // 设置湿度阈值
        function setHumidThreshold() {
            const max = prompt('请输入湿度最高阈值(%):', state.humidMax);
            if (max === null) return;
            const min = prompt('请输入湿度最低阈值(%):', state.humidMin);
            if (min === null) return;
            
            const maxVal = parseInt(max);
            const minVal = parseInt(min);
            
            if (minVal >= maxVal) {
                alert('最低阈值不能大于等于最高阈值！');
                return;
            }
            
            state.humidMax = maxVal;
            state.humidMin = minVal;
            document.getElementById('humidRange').textContent = `${minVal}-${maxVal}%`;
            document.getElementById('chartHumidRange').textContent = `${minVal}-${maxVal}%`;
            
            sendSettings();
        }

        // 设置食物量
        function setFoodAmount() {
            const amount = prompt('请输入食物数量:', state.foodAmount);
            if (amount === null) return;
            
            const value = parseInt(amount);
            if (value < 0) {
                alert('食物量不能为负数！');
                return;
            }
            
            state.foodAmount = value;
            document.getElementById('foodValue').textContent = `剩余${value}`;
            
            sendSettings();
        }

        // 投喂
        function triggerFeeding() {
            if (!isConnected) {
                alert('请先连接MQTT！');
                return;
            }
            
            const message = {
                fd: parseInt(state.deviceFd) || 0,  // 设备fd转为int
                feed: "1"
            };
            
            const topic = document.getElementById('mqttTopic').value;
            mqttClient.publish(topic, JSON.stringify(message));
            addLog('success', `✅ 投喂命令已发送`);
        }

        // 环境光控制
        function toggleLight() {
            if (!isConnected) {
                alert('请先连接MQTT！');
                return;
            }
            
            lightOn = !lightOn;
            
            const message = {
                fd: parseInt(state.deviceFd) || 0,  // 设备fd转为int
                light: lightOn ? "1" : "0"
            };
            
            const topic = document.getElementById('mqttTopic').value;
            mqttClient.publish(topic, JSON.stringify(message));
            
            const btn = document.getElementById('lightBtn');
            btn.textContent = lightOn ? '🌙 关闭环境光' : '💡 开启环境光';
            addLog('success', `✅ 环境光${lightOn ? '开启' : '关闭'}命令已发送`);
        }

        // 发送设置
        function sendSettings() {
            if (!isConnected) {
                addLog('warning', '⚠️ MQTT未连接，设置已保存但未发送');
                return;
            }
            
            const message = {
                fd: parseInt(state.deviceFd) || 0,  // 设备fd转为int
                Tem_max: String(state.tempMax),
                Tem_min: String(state.tempMin),
                Hum_max: String(state.humidMax),
                Hum_min: String(state.humidMin),
                food: String(state.foodAmount)
            };
            
            const topic = document.getElementById('mqttTopic').value;
            mqttClient.publish(topic, JSON.stringify(message));
            addLog('success', `✅ 设置已发送: ${JSON.stringify(message)}`);
        }

        // 日志
        function addLog(type, msg) {
            const log = document.getElementById('logContent');
            const time = new Date().toLocaleTimeString();
            const div = document.createElement('div');
            div.className = `log-entry ${type}`;
            div.textContent = `[${time}] ${msg}`;
            log.appendChild(div);
            log.scrollTop = log.scrollHeight;
        }

        function clearLog() {
            document.getElementById('logContent').innerHTML = '';
        }
    </script>
</body>
</html>

